﻿@model DriveBabyDrive.Models.ReadingModel


@{
    ViewBag.Title = "ReadingResult";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0YnZkQIddxpZ8AzgRDmb6wmVol8mOvks&sensor=true"></script>   
<script type="text/javascript">
    var map;
    var dtReadings;
    var infoPainHtml;
    $(function () {
        //set width and height of the map div
        $("#divMap").width($(window).width()-$(window).width()*0.085);
        $("#divMap").height($(window).height()-$("#divHeader").height()-$("#divReadings").height()-$(window).height()*0.1);
        var lati=Number("@Model.Lattitude.ToString()" );
        var longi = Number("@Model.Longitude.ToString()");
        //set options
            var myOptions = {
                center: new google.maps.LatLng(lati, longi),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //draw map
            map = new google.maps.Map(document.getElementById("divMap"), myOptions);
            
            //initialize markers
             var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lati, longi),
                map: map,
                title: "MPG: @Model.FuelEfficiency.ToString("G") CPM:$@Model.CostPerFuelUnit.ToString("C")",
                infoContent:buildInfoPaneHTML()
            });
            //add listner for info pane
            google.maps.event.addListenerOnce(marker, 'click', openInfoWindow);
        
    
   
    });
     
    function openInfoWindow() {
        var infoWindow = new google.maps.InfoWindow({
            content: this.infoContent
        });        
        google.maps.event.addListener(infoWindow, 'closeclick', function () {
            google.maps.event.addListenerOnce(this.anchor, 'click', openInfoWindow);
        });
        infoWindow.open(map, this);        
    }

    function buildInfoPaneHTML() {
                var retHTML = "<div style='font-family:Verdana;font-size:0.95em;color:black'>";   
                retHTML = retHTML + "<b>Vehicle:</b>@Model.Vehicle <br/>";
                retHTML = retHTML + "<b>Date:</b>@Model.TimeStamp.ToShortDateString()<br/>";
                retHTML = retHTML + "<b>Miles per Gallon:</b> @Model.FuelEfficiency.ToString("G")<br/>";
                retHTML = retHTML + "<b>Cost Per Mile:</b> $@Model.CostPerFuelUnit.ToString("C")<br/>";
                retHTML = retHTML + "</div>";
                return retHTML;            
        }
 </script>
@section Header {
   
    <div class="ui-grid-b" style="padding:1%" id="divHeader">
	    <div class="ui-block-a">@Html.ActionLink("Back", "Index/", "Reading", null, new { data_icon = "arrow-l", data_role = "button" })</div>
	    <div class="ui-block-b"  style="text-align:center">@Html.ActionLink("Home", "Index/", "Home", null, new { data_icon = "home", data_iconpos = "notext", data_role = "button" })</div>
	    <div class="ui-block-c" style="text-align:right"> @Html.Partial("_LogOnPartial")</div>
    </div>
}

<h2>Last Run ...</h2>

 <div class="ui-grid-a" id="divReadings">
    <div class="ui-block-a" style="text-align:center"><strong>MPG</strong><br /><div style="font-size:2em"> @Model.FuelEfficiency.ToString("G")</div></div>
	<div class="ui-block-b" style="text-align:center"><strong>CPM</strong><br /> <div style="font-size:2em">@Model.CostPerFuelUnit.ToString("C")</div></div>
 </div>
 <div id="divMap"  >
 </div>